<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>数据超市</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/data_supermarket.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css">
	</head>
	<body>
		<!-- 轮播 -->
		<div class="banner supermarket_banner">
			<div class="banner_nr banner_super swiper-container swiper-no-swiping">
				<ul class="swiper-wrapper">
					<li class="swiper-slide">
						<img src="images/supermarket_banImg.png">
					</li>
					<li class="swiper-slide">
						<img src="images/banner2.jpg">
					</li>
					<li class="swiper-slide">
						<img src="images/banner3.jpg">
					</li>
					<li class="swiper-slide">
						<img src="images/banner4.jpg">
					</li>
				</ul>
				<div class="swiper-pagination"></div>
			</div>
		</div>

		<!-- 天气在线预报数据 -->
		<div class="forecast_data">
			<div class="forecast_content" style="margin-top: 65px;">
				<div class="index_title forecast_data_box">
					<p class="index_title_xian_left"></p>
					<span class="index_title_name">天气在线预报数据</span>
					<p class="index_title_xian_right"></p>
					<div class="title_xq">
						<p>天气在线预报数据的产品特点，预报数据的产品特点</p>
					</div>
				</div>
				<div class="forecast_list_box">
					<div class="assistant_list forecast_list_con">
						<ul class="forecast_List">
							<li>
								<div class="list_xian">
									<p></p>
								</div>
								<div class="list_nr">
									<img class="forecast_List_img" src="images/forecast_List_img1.png">
									<span>全球XX城市覆盖</span>
									<p>再也无需购买XX天气服务轻松实现天气访问</p>
								</div>
							</li>
							<li>
								<div class="list_xian">
									<p></p>
								</div>
								<div class="list_nr">
									<img class="forecast_List_img" src="images/forecast_List_img2.png">
									<span>分钟级数据更新</span>
									<p>再也无需购买XX天气服务轻松实现天气访问</p>
								</div>
							</li>
							<li>
								<div class="list_xian">
									<p></p>
								</div>
								<div class="list_nr">
									<img class="forecast_List_img" src="images/forecast_List_img3.png">
									<span>数据质量的控制</span>
									<p>再也无需购买XX天气服务轻松实现天气访问</p>
								</div>
							</li>
							<li>
								<div class="list_xian">
									<p></p>
								</div>
								<div class="list_nr">
									<img class="forecast_List_img" src="images/forecast_List_img4.png">
									<span>AI数据管理</span>
									<p>再也无需购买XX天气服务轻松实现天气访问</p>
								</div>
							</li>
							<li>
								<div class="list_xian">
									<p></p>
								</div>
								<div class="list_nr">
									<img class="forecast_List_img" src="images/forecast_List_img5.png">
									<span>全场景分布</span>
									<p>再也无需购买XX天气服务轻松实现天气访问</p>
								</div>
							</li>
							<li>
								<div class="list_xian">
									<p></p>
								</div>
								<div class="list_nr">
									<img class="forecast_List_img" src="images/forecast_List_img6.png">
									<span>弹性部署</span>
									<p>再也无需购买XX天气服务轻松实现天气访问</p>
								</div>
							</li>
							<li>
								<div class="list_xian">
									<p></p>
								</div>
								<div class="list_nr">
									<img class="forecast_List_img" src="images/forecast_List_img7.png">
									<span>公里级空间分辨率</span>
									<p>再也无需购买XX天气服务轻松实现天气访问</p>
								</div>
							</li>
							<li>
								<div class="list_xian">
									<p></p>
								</div>
								<div class="list_nr">
									<img class="forecast_List_img" src="images/forecast_List_img8.png">
									<span>分钟级时间分辨率</span>
									<p>再也无需购买XX天气服务轻松实现天气访问</p>
								</div>
							</li>
						</ul>
					</div>
									
				</div>
			</div>
		</div>
		
		<!-- 数据目录 -->
		<div class="data_directory">
			<div class="forecast_content">
				<div class="index_title data_directory_index">
					<p class="index_title_xian_left"></p>
					<span class="index_title_name">数据目录</span>
					<p class="index_title_xian_right"></p>
					<div class="title_xq">
						<p>各种数据列表信息标题，各种数据简介</p>
					</div>
				</div>
				<div class="data_directory_content">
					<!-- 天气预报数据 -->
					<div class="weather_forecast_box">
						<ul>
							<li>
								<span>◆</span><div class="data_directory_info">24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报</div> 
								<img src="images/hot.png"><!-- hot图标 -->
								<img src="images/free.png"><!-- 免费图标 -->
							</li>
							<li>
								<span>◆</span><div class="data_directory_info"> 7D逐日预报数据（4时段/天）</div>
								<img src="images/hot.png"><!-- hot图标 -->
								<img src="images/free.png"><!-- 免费图标 -->
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">逐日历史期限该资料</div> 
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">中国约/季气候预测</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报是个</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报个阿尔法</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报二姑夫</div>
							</li>
						</ul>
						<ul>
							<li>
								<span>◆</span><div class="data_directory_info">24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报</div> 
								<img src="images/hot.png"><!-- hot图标 -->
								<img src="images/free.png"><!-- 免费图标 -->
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">7D逐日预报数据（4时段/天） </div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">逐日历史期限该资料</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">中国约/季气候预测</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报是个</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报个阿尔法</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报二姑夫</div>
							</li>
						</ul>
					</div>
					<!-- 商业气象服务数据 -->
					<div class="Business_climate_box">
						<ul>
							<li>
								<span>◆</span><div class="data_directory_info">24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报</div> 
								<img src="images/hot.png"><!-- hot图标 -->
								<img src="images/free.png"><!-- 免费图标 -->
							</li>
							<li>
								<span>◆</span><div class="data_directory_info"> 7D逐日预报数据（4时段/天）</div>
								<img src="images/hot.png"><!-- hot图标 -->
								<img src="images/free.png"><!-- 免费图标 -->
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">逐日历史期限该资料</div> 
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">中国约/季气候预测</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报是个</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报个阿尔法</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报二姑夫</div>
							</li>
						</ul>
						<ul>
							<li>
								<span>◆</span><div class="data_directory_info">24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报24H逐小时天气预报</div> 
								<img src="images/hot.png"><!-- hot图标 -->
								<img src="images/free.png"><!-- 免费图标 -->
							</li>
							<li>
								<span>◆</span><div class="data_directory_info"> 7D逐日预报数据（4时段/天）</div>
								<img src="images/hot.png"><!-- hot图标 -->
								<img src="images/free.png"><!-- 免费图标 -->
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">逐日历史期限该资料</div> 
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">中国约/季气候预测</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报是个</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报个阿尔法</div>
							</li>
							<li>
								<span>◆</span><div class="data_directory_info">海洋海浪预报二姑夫</div>
							</li>
						</ul>
					</div>
				</div>

				<!-- 方案功能按钮 -->
				<div class="data_choice">
					<a href="javascript:;" hsrc="data_price.html">
						<img src="images/jiage_an_icon.png">
						<span>价格方案</span>
					</a>
					<a href="javascript:;" hsrc="data_choose.html">
						<img src="images/shuju_an_icon.png">
						<span>数据选购</span>
					</a>
				</div>
			</div>
		</div>
		
		<!-- 专家天气图 -->
		<div class="forecast_data">
			<div class="forecast_content">
				<div class="index_title Weather_index_box">
					<p class="index_title_xian_left"></p>
					<span class="index_title_name">专家天气图</span>
					<p class="index_title_xian_right"></p>
					<div class="title_xq">
						<p>这是专家天气图的相关简介说明，简单解释标题含义</p>
					</div>
				</div>
				<div class="Weather_img_box">
					<img src="images/Weather_img.png" alt="">
				</div>
			</div>
		</div>
		
		<!-- 数据定制服务 -->
		<div class="custom_data">
			<div class="forecast_content">
				<div class="index_title custom_data_index">
					<p class="index_title_xian_left"></p>
					<span class="index_title_name">数据定制服务</span>
					<p class="index_title_xian_right"></p>
					<div class="title_xq">
						<p>我们已为公众及合作伙伴提供了<i id="show2" shownum="24542154">24，542，154</i>次数据定制服务</p>
					</div>
				</div>
				<div class="custom_data_box">
					<div class="custom_data_con">
						<img src="images/custom_data_img1.png" >
						<div class="custom_content">
							按需求提供定制化 天气数据解决方案按需求提供定制化
						</div>
						<div class="custom_btn_view">查看</div>
					</div>
					<div class="custom_data_con">
						<img src="images/custom_data_img2.png" >
						<div class="custom_content">
							按需求提供定制化 天气数据解决方案按需求提供定制化
						</div>
						<div class="custom_btn_view">查看</div>
					</div>
					<div class="custom_data_con">
						<img src="images/custom_data_img3.png" >
						<div class="custom_content">
							按需求提供定制化 天气数据解决方案按需求提供定制化
						</div>
						<div class="custom_btn_view">查看</div>
					</div>
					<div class="custom_data_con">
						<img src="images/custom_data_img4.png" >
						<div class="custom_content">
							按需求提供定制化 天气数据解决方案按需求提供定制化
						</div>
						<div class="custom_btn_view">查看</div>
					</div>
				</div>
				<!-- 定制开发联系信息 -->
				<div class="development_info_box">
					<div class="development_info">
						<img src="images/development_user.png" >
						<p>定制化开发联系：<span>周先生PM</span></p>
					</div>
					<div class="development_info">
						<img src="images/development_phone.png" >
						<p>M/T：<span>189967383720    023-68071292</span></p>
					</div>
					<div class="development_info">
						<img src="images/development_email.png" >
						<p>Mail：<span>T7ol@zxl.com</span></p>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/layui/layui.js"></script>
	<script type="text/javascript" src="js/swiper4.min.js"></script>
	<script type="text/javascript">
		$(function() {
			//banner轮播
			var swiper = new Swiper('.banner_super', {
				effect: 'fade',
				loop: true,
				autoplay: {
					delay: 4000,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
				},
			});
			
			// 数字增加
			setInterval("Refresh();", 3000);

			// 调用父页面事件
			$('.data_choice a').click(function(){
				var Hsrc = $(this).attr('hsrc');
				window.parent.data_hrcf(Hsrc);
			})
		});
		
		function Refresh() {
			var min = 2; //生成的最小的数字，比如200
			var max = 5; //生成的最大的数字，比如500
			//增加随机数
			var shownum = parseInt(Math.random() * (max - min + 1) + min);
			//累加值
			var shownum = shownum + parseInt($('#show2').attr('shownum'));
			$('#show2').attr('shownum', shownum);
			//赋值
			$('#show2').text(formatNum(shownum));
		};
		
		//将数字串转换成带逗号的显示方式
		function formatNum(num) {
			if (!/^([+\-])?(\d+)(\.\d+)?$/.test(num)) {
				alert("wrong!");
				return num;
			}
			let a = RegExp.$1;
			let b = RegExp.$2;
			let c = RegExp.$3;
			let re = new RegExp().compile("(\\d)(\\d{3})(，|$)");
			while (re.test(b))
				b = b.replace(re, "$1，$2$3");
			return a + "" + b + "" + c;
		};
		
		// 跳转数据超市-价格方案页面
		$('.forecast_List li').click(function() {
			parent.goPricePlan();
		})
	</script>
</html>
